<template>
	<view class="oderPage">
		<view class="head" :style="[{ height: customBar + 'px' }]">
			<u-navbar title="订单详情" :autoBack="true" :titleStyle="{ fontSize: '34rpx', fontWeight: '500' }"></u-navbar>
		</view>
		<view class="">
			<view class="reservationList">
				<view class="reservationLeft">
					<image class="img" :src="HTTP_IMG_URL() + obj.images"></image>
				</view>
				<view class="reservationRight">
					<view class="reservationName">{{ obj.name }}</view>
					<view class="reservationLable">
						<view class="label_green" v-for="(v, i) in obj.labels">
							{{ v }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="priceDetail">
			<view class="title">价格明细</view>
			<view class="list">
				<view>商品总价</view>
				<view>￥{{ type == "0" ? money : dayMoney }}</view>
			</view>
			<view class="list">
				<view>优惠券</view>
				<view>￥0</view>
			</view>
			<view class="list">
				<view>合计</view>
				<view style="color: #fd463e">
					￥{{ type == "0" ? money : dayMoney }}
				</view>
			</view>
		</view>
		<view class="priceDetail">
			<view class="title">选择支付方式</view>
			<u-radio-group v-model="jfVal" @change="groupChange">
				<view class="list">
					<view class="name">
						<image class="img" src="@/static/reservation/wx.png" mode="widthFix"></image>
						微信支付
					</view>
					<view>
						<u-radio shape="square" activeColor="#A3C616" name="1"></u-radio>
					</view>
				</view>
				<view class="list">
					<view class="name">
						<image class="img" src="@/static/reservation/jf.png" mode="widthFix"></image>
						积分支付（剩余{{ score }}积分）
					</view>
					<view>
						<u-radio shape="square" activeColor="#A3C616" name="2"></u-radio>
					</view>
				</view>
			</u-radio-group>
		</view>
		<view class="sure" @click="handleSure()">确认支付</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		HTTP_IMG_URL
	} from "../../config/app.js";
	export default {
		data() {
			return {
				customBar: 88,
				jfVal: "",
				obj: {},
				score: "",
				id: "",
				money: "",
				dayMoney: "",
				totalParams: {},
				type: "",
			};
		},
		computed: mapGetters(["isLogin", "uid", "userInfo"]),
		onLoad(params) {
			this.totalParams = params;
			this.id = params.id;
			this.dayMoney = params.dayMoney;
			this.money = params.money;
			this.type = params.type;
			this.score = JSON.parse(uni.getStorageSync("USER_INFO")).score;
			this.getDetail(params.id);
		},
		methods: {
			HTTP_IMG_URL() {
				return HTTP_IMG_URL;
			},
			groupChange(n) {
				console.log("groupChange", n);
			},
			getDetail(id) {
				var that = this;
				that.$Api.reservation.stadiumDetail({
					id: id,
				}).then((res) => {
					this.obj = res.data;
					console.log(res.data, 23);
				});
			},
			handleSure() {
				if (!this.jfVal) {
					return uni.showToast({
						title: "请选择支付方式",
						icon: "error",
					});
				}
				//
				this.totalParams.selected = this.totalParams.selected.split(",");
				this.$Api.reservation
					.addStadium({
						stadium_id: this.id,
						pay_type: this.jfVal == 2 ? "score" : "wechat",
						yd_type: Number(this.totalParams.type) + 1, //预约类型:1=按天,2=按小时
						yy_times: this.totalParams.type == "0" ? this.totalParams.dayArr : this.totalParams.selected
					})
					.then((res) => {
						console.log(res.data, 23);
						if (res.code == 1) {
							if (this.jfVal == "1") {
								wx.requestPayment({
									timeStamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									signType: res.data.signType,
									paySign: res.data.paySign,
									success: function(ress) {
										uni.showToast({
											title: "支付成功",
											icon: "none", //如果要纯文本，不要icon，将值设为'none'
											duration: 2000, //持续时间为 2秒
										});
										let st = setTimeout(function() {
											clearTimeout(st);
											uni.navigateTo({
												url: "/pages/reservation/success?type=1",
											});
										}, 2000);
									},
									fail: function(ress) {
										uni.showToast({
											title: "取消支付",
											icon: "none", //如果要纯文本，不要icon，将值设为'none'
											duration: 2000, //持续时间为 2秒
										});
										// let st = setTimeout(function () {
										//   clearTimeout(st);
										//   uni.redirectTo({
										//     url:
										//       "/branch_hotel/order/orderDetail?data=" +
										//       res.data.data.orderId,
										//   });
										// }, 2000);
									},
									complete: function(ress) {
										console.log(ress, 3);
									},
								});
							} else {
								uni.navigateTo({
									url: "/pages/reservation/success?type=1",
								});
							}
						}
					});
			},
		},
	};
</script>

<style lang="scss">
	.oderPage {
		height: 100%;
		min-height: 100vh;
		font-family: PingFang SC;
		background: #f5f5f4;
		padding: 0 32rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);

		.reservationList {
			width: 100%;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.1),
				inset 0rpx 2rpx 2rpx 0rpx #ffffff;
			border-radius: 28rpx;
			margin-bottom: 20rpx;
			display: flex;
			padding: 20rpx 22rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.reservationLeft {
				width: 156rpx;
				height: 156rpx;
				background: #ffffff;
				border-radius: 28rpx;

				.img {
					width: 156rpx;
					height: 156rpx;
				}
			}

			.reservationRight {
				margin-left: 20rpx;

				width: 100%;

				.reservationName {
					font-weight: 500;
					font-size: 32rpx;
				}

				.reservationLable {
					display: flex;
					margin-top: 8rpx;
					flex-wrap: wrap;

					.label_green {
						padding: 5rpx 20rpx;
						color: #a3c616;
						background: rgba(163, 198, 22, 0.2);
						border-radius: 40rpx;
						font-size: 24rpx;
						margin-right: 10rpx;
						margin-top: 10rpx;
					}
				}
			}
		}

		.priceDetail {
			width: 100%;
			background: #ffffff;
			border-radius: 28rpx;
			box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.1),
				inset 0rpx 2rpx 2rpx 0rpx #ffffff;
			margin-top: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.title {
				font-size: 32rpx;
				border-bottom: 1px #e6e5e5 solid;
				padding-bottom: 28rpx;
			}

			.u-radio-group--row {
				display: block;
			}

			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				margin-top: 26rpx;

				.name {
					display: flex;
					align-items: center;
				}

				.img {
					width: 52rpx;
					margin-right: 16rpx;
				}
			}
		}

		.sure {
			width: 100%;
			height: 88rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #a3c616;
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(163, 198, 22, 0.3);
			border-radius: 24rpx;
			margin-top: 140rpx;
		}
	}
</style>